    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>商品浏览应用</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
        <style>
            .hidden-overflow {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>
    <body class="bg-gray-100 font-sans">
        <div id="app" class="container mx-auto p-4">
            <div id="search-bar" class="bg-white p-4 rounded-lg shadow-md mb-6 flex items-center gap-4">
                <input type="text" id="search-input" 
                       class="flex-1 p-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" 
                       placeholder="输入商品关键词">
                <button id="search-btn" 
                        class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
                    搜索
                </button>
            </div>

            <div id="main-content"></div>

            <script>
                let currentPage = 'home';
		const pageHistory = []; // 新增页面历史栈
                const renderHomePage = () => {
		    pageHistory.length = 0; // 进入首页时清空历史
                    const content = `
                        <div class="flex flex-col md:flex-row gap-6">
                            <div class="w-full md:w-1/2 bg-white p-4 rounded-lg shadow-md">
                                <h2 class="text-lg font-bold mb-4">评论排行榜</h2>
                                <div id="review-ranking" class="space-y-3"></div>
                            </div>
                            <div class="w-full md:w-1/2 bg-white p-4 rounded-lg shadow-md">
                                <h2 class="text-lg font-bold mb-4">品牌排行榜</h2>
                                <div id="brand-ranking" class="space-y-3"></div>
                            </div>
                        </div>
                    `;
                    document.getElementById('main-content').innerHTML = content;
                    loadReviewRanking();
                    loadBrandRanking();
                };

		const renderListPage = (products) => {
                    currentPage = 'list';
                    pageHistory.push({ type: 'list', products }); // 记录列表页状态
                    const content = `
		        <div class="fixed top-4 left-4 z-10"> <!-- 新增返回按钮 -->
                            <button id="back-btn" class="bg-gray-200 text-gray-800 px-3 py-1 rounded-lg hover:bg-gray-300 transition-colors flex items-center">
                                <i class="fas fa-arrow-left mr-1"></i> 返回
                            </button>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                            ${products.map(product => `
                                <div class="bg-white p-4 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow" data-id="${product.uniqId}">
                                    <h3 class="text-sm font-bold mb-2">${product.title}</h3>
                                    <div class="text-gray-600">
                                        品牌: ${product.manufacturer}<br>
                                        价格: ${product.price}<br>
                                        星级: ${product.averageStar.toFixed(2)}<br>
		                        评论数: ${product.sellerNumOfReviews}
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    `;
                    document.getElementById('main-content').innerHTML = content;
                    document.querySelectorAll('[data-id]').forEach(el => {
                        el.addEventListener('click', () => loadProductDetail(el.dataset.id));
                    });
		    document.getElementById('back-btn').addEventListener('click', () => {
                        renderHomePage();
                    });
                };

                const loadReviewRanking = async () => {
                    try {
                        const response = await fetch('/api/product/review-ranking');
                        const data = await response.json();
                        const reviewRankingContainer = document.getElementById('review-ranking');
                        reviewRankingContainer.innerHTML = data.map(item => `
                            <div class="flex justify-between items-center cursor-pointer hover:bg-gray-100 p-2 rounded-lg" data-id="${item.uniqId}">
                                <span class="w-4/5 hidden-overflow">${item.title}</span>
                                <span class="text-gray-600">评论数: ${item.sellerNumOfReviews}</span>
                            </div>
                        `).join('');
                        reviewRankingContainer.querySelectorAll('[data-id]').forEach(el => {
		            el.addEventListener('click', () => { 
				pageHistory.push({ type: 'home' });
				loadProductDetail(el.dataset.id) 
			    });
                        });
                    } catch (error) {
                        console.error('加载评论排行榜失败', error);
                    }
                };

                const loadBrandRanking = async () => {
                    try {
                        const response = await fetch('/api/product/brand-ranking');
                        const data = await response.json();
                        const brandRankingContainer = document.getElementById('brand-ranking');
                        brandRankingContainer.innerHTML = data.map(item => `
                            <div class="flex items-center cursor-pointer hover:bg-gray-100 p-2 rounded-lg" data-key="${item.key}">
                                <span>${item.key} (${item.score})</span>
                            </div>
                        `).join('');
                        brandRankingContainer.querySelectorAll('[data-key]').forEach(el => {
                            el.addEventListener('click', () => searchByManufacturer(el.dataset.key));
                        });
			//document.querySelectorAll('[data-id]').forEach(el => {
                        //    el.addEventListener('click', () => {
                        //        pageHistory.push({ type: 'detail', product: el.closest('[data-id]').dataset }); // 记录详情页前的状态
                        //        loadProductDetail(el.dataset.id);
                        //    });
                        //});
                    } catch (error) {
                        console.error('加载品牌排行榜失败', error);
                    }
                };



	        const renderDetailPage = (product) => {
                    currentPage = 'detail';
                    //pageHistory.push({ type: 'detail', product }); // 记录详情页状态
                    const content = `
                        <div class="fixed top-4 left-4 z-10"> <!-- 新增返回按钮 -->
                            <button id="back-btn" class="bg-gray-200 text-gray-800 px-3 py-1 rounded-lg hover:bg-gray-300 transition-colors flex items-center">
                                <i class="fas fa-arrow-left mr-1"></i> 返回
                            </button>
                        </div>
                        <div class="bg-white p-4 rounded-lg shadow-md">
                            <h1 class="text-xl font-bold mb-4">${product.title}</h1>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <p class="text-gray-600">页面链接: <a href="${product.pageUrl}" target="_blank" class="text-blue-500">查看链接</a></p>
                                    <p class="text-gray-600">品牌: ${product.manufacturer}</p>
                                    <p class="text-gray-600">型号: ${product.modelName}</p>
                                    <p class="text-gray-600">颜色: ${product.colorCategory}</p>
                                </div>
                                <div>
                                    <p class="text-gray-600">价格: ${product.price}</p>
                                    <p class="text-gray-600">内存: ${product.internalMemory}</p>
                                    <p class="text-gray-600">屏幕尺寸: ${product.screenSize}</p>
                                    <p class="text-gray-600">卖家评级: ${product.sellerRating.toFixed(2)}</p>
                                    <p class="text-gray-600">评论数: ${product.sellerNumOfReviews}</p>
                                    <p class="text-gray-600">平均星级: ${product.averageStar.toFixed(2)}</p>
                                </div>
                            </div>
                        </div>
                    `;
                    document.getElementById('main-content').innerHTML = content;
                    // 绑定返回按钮事件
                    //document.getElementById('back-btn').addEventListener('click', goBack);
		    document.getElementById('back-btn').addEventListener('click', () => {
                        const lastState = pageHistory.pop(); // 弹出最后一个状态
                        if (lastState?.type === 'list') { // 确保返回列表页
                            renderListPage(lastState.products);
                        } else if (lastState?.type === 'home') {
                            renderHomePage();
                        }
                    });
                };



                const searchProducts = async (keyword) => {
                    if (!keyword.trim()) return;
                    try {
                        const response = await fetch(`/api/product/search?content=${encodeURIComponent(keyword)}`);
                        const data = await response.json();
                        renderListPage(data);
                    } catch (error) {
                        console.error('搜索失败', error);
                    }
                };

                const searchByManufacturer = async (manufacturer) => {
                    if (!manufacturer.trim()) return;
                    try {
                        const response = await fetch(`/api/product/search?manufacturer=${encodeURIComponent(manufacturer)}`);
                        const data = await response.json();
                        renderListPage(data);
                    } catch (error) {
                        console.error('按品牌搜索失败', error);
                    }
                };

                const loadProductDetail = async (id) => {
                    try {
                        const response = await fetch(`/api/product/${id}`);
                        const data = await response.json();
                        renderDetailPage(data);
                    } catch (error) {
                        console.error('加载商品详情失败', error);
                    }
                };

                const searchInput = document.getElementById('search-input');
                const searchBtn = document.getElementById('search-btn');

                searchBtn.addEventListener('click', () => {
                    const keyword = searchInput.value;
                    searchProducts(keyword);
                });

                searchInput.addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') {
                        const keyword = e.target.value;
                        searchProducts(keyword);
                    }
                });


		const goBack = () => {
                    const lastPage = pageHistory.pop(); // 弹出最后一个页面
                    if (!lastPage) return;
                    switch (lastPage.type) {
                        case 'list':
                            renderListPage(lastPage.products);
                            break;
                        case 'home':
                            renderHomePage();
                            break;
                        // 可扩展其他页面类型
                    }
                };

                window.onload = renderHomePage;
            </script>
        </div>
    </body>
    </html>
    
